/**
name - таг (div, a, p, ...)
.name - класс (имя класса)
#name - атрибут id
**/

/**GENERAL**/

html, body, .page{
    width: 100%; height: 100%;
}

body, form {
    margin: 0px; padding: 0px;
}

* {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}

/**FONTS**/

.font_large_light {
    padding: 5px;
    font-size: 42px; color: #606060;
    font-family: SegoeUIL;
}

.font_middle_bold {
    padding: 2px;
    font-size: 16; color: #606060;
    font-family: SegoeUISb;
}

.font_middle {
    padding: 2px;
    font-size: 16; color: #606060;
    font-family: SegoeUI;
}

/**PAGE**/

.page {
    position: relative;
    background-color: #ffffff;
}

/**PAGE AUTH AND REG**/

.page .auth_and_reg {
    position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -120px;
    width: 500px; height: 240px;
    padding: 10px;
    border: 2px solid #a0a0a0;
}

.page .auth_and_reg .form_title {
    margin-bottom: 10px;
}

.page .auth_and_reg .login_block,
.page .auth_and_reg .password_block,
.page .auth_and_reg .enter_button_block,
.page .auth_and_reg .to_registration_block{
    height: 34px; width: 100%;
}


.page .auth_and_reg .login_block .title, .page .auth_and_reg .password_block .title {
    float: left;
    width: 30%; height: 34px;
    padding: 5px;
}

.page .auth_and_reg .login_block .input_block, .page .auth_and_reg .password_block .input_block {
    float: left;
    width: 70%; height: 34px;
    padding: 2px;
}

.page .auth_and_reg .login_block .input_block input, .page .auth_and_reg .password_block .input_block input {
    width: 100%; height: 100%;
    border: 1px solid #a0a0a0;
    outline: 0px;
}

.page .auth_and_reg .login_block .input_block input:focus, .page .auth_and_reg .password_block .input_block input:focus {

}

.page .auth_and_reg .enter_button_block {
    padding: 2px;
}

.page .auth_and_reg .enter_button_block .button {
    float: right;
    height: 100%; min-width: 140px;
    padding: 2px 10px 2px 10px;
    border: 1px solid #a0a0a0;
    text-align: center;
    cursor: pointer;
}

.page .auth_and_reg .enter_button_block .button:hover {
    border: 2px solid #00E1EB;
    padding: 1px 9px 1px 9px;
    color: #00E1EB;
}

.page .auth_and_reg .to_registration_block {
    padding: 2px;
}

/**QUESTION**/

.page .current_question_block {
    position: absolute; top: 0px; left: 0px;
    width: 150px; height: 100%;
    padding: 10px;
}

.page .current_question_block .current_question_value {
    width: 100%;
    border: 2px solid #a0a0a0;
    text-align: center;
}

.page .question_block {
    width: 100%; height: 100%;
    padding: 10px 10px 10px 160px;
}

.page .question_block .title {
    margin-bottom: 10px;
}

.page .question_block .question_text_block {
    padding: 10px;
    border: 1px dashed #a0a0a0;
}

.page .question_block .question_text_block {

}

.page .question_block .answer_block {

}

.page .question_block .answer_block .title {

}

.page .question_block .answer_block .text_block, .page .question_block .answer_block .buttons_block {
    width: 100%; padding: 2px; height: 34px;
}

.page .question_block .answer_block .text_block input {
    width: 100%; height: 100%;
}

.page .question_block .answer_block .text_block input:focus {
    outline: 0px;
}

.page .question_block .answer_block .buttons_block .button {
    float: left;
    height: 100%; min-width: 140px;
    padding: 2px 10px 2px 10px;
    margin: 0px 4px 0px 0px;
    border: 1px solid #a0a0a0;
    text-align: center;
    cursor: pointer;
}

.page .question_block .answer_block .buttons_block .button:hover {
    border: 2px solid #00E1EB;
    padding: 1px 9px 1px 9px;
    color: #00E1EB;
}